function changeHTML() {
    
//  按钮跳转地址
    const links = document.querySelectorAll('a.tool-item');
    const urls = [];
    links.forEach(link => {
        urls.push(link.href);
    });
    const prehref = urls[0]
    const nexthref = urls[1]
//    标题
    const headerCenter = document.querySelector('.header-center');
    const content = headerCenter.innerHTML;
//    图片
    var images = document.getElementsByTagName('img');
    var str = '';
    for (var i = 0; i < images.length; i++) {
        const src = images[i].getAttribute('data-original');
        if(src != null) {
            var idx = `${i}/${images.length-1}`
            var string = `<div class="carousel-item"><div class="myindex">${idx}&nbsp;&nbsp;${content}</div><img src='${src}'></div>`
            if (i == 1){
                string = `<div class="carousel-inner"><div class="carousel-item active"><div class="myindex">${idx}&nbsp;&nbsp;${content}</div><img src='${src}'></div>` ;
            }
            str = str + string;
            if (i == images.length - 1) {
                str = str + '</div>';
            }
        }

    }
    const s = 'script';
    var newstr = `
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <${s} src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></${s}>
    </head>
    <body>
    <!-- Bootstrap 5 data-bs-interval="false"不自动播放。 -->
      <div id ="demo" class="carousel slide img-content" data-bs-interval="false">
        ${str}
        <!-- 左右切换按钮 -->
          <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
          </button>
      </div>
      <div class="toolbar">
        <a href="${prehref}" class="btn btn-dark">上一章</a>
        <buttton class="btn btn-dark">目录</buttton>
        <a href="${nexthref}" class="btn btn-dark">下一章</a>
      </div>
    </body>
    <style>
    img {
        width: 100%;
        margin-top: 40px;
    }
    .toolbar {
        display: flex;
        flex-direction: row;
        background-color: #fff;
        width: 100%;
        height: 80px;
        position: fixed;
        left: 0px;
        bottom: 0px;
        opacity: 0.8;
    }
    .btn {
        display: flex;
        width:30%;
        margin-left: 2.5%;
        align-items: center;
        justify-content: center;
        font-size: 30px;
    }
    .myindex {
        position: fixed;
        top: 0px;
        background-color: #000;
        font-size: 24px;
        height: 40px;
        width:100%;
        color: #fff;
        padding-left: 2.5%;
    }
    a {
        color: #fff;
    }

    </style>
    </html>`;
    console.log(newstr)
    var rootElement = document.documentElement;
    // 修改根元素的innerHTML属性
    rootElement.innerHTML = newstr;
}


window.onload = function() {
    ///不是章节页面就不处理
    const page = document.getElementsByClassName("chapter-page")[0]
    if (page == undefined) {
        return;
    }
    
    const newJsScript = document.createElement('script');
    newJsScript.src = 'https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js'
    document.head.appendChild(newJsScript)

    const newCssLink = document.createElement('link');
    newCssLink.rel = 'stylesheet';
    newCssLink.href = 'https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css';
    document.head.appendChild(newCssLink)

    console.log(document.head)
    
    changeHTML()
    
    const demo = document.querySelector('#demo');
   
//   添加点击事件监听器
    demo.addEventListener('slid.bs.carousel', function(e) {
        console.log('scroll结束了');
        console.log(e);
        console.log(e.target.innerText);
    });
}




 
